<template>
    <view>
        <Tabs :tabs111="tabs" @tabsItemChange="handleTabsItemChange">
            <view class="fb_main">
                <view class="fb_title">问题的种类</view>
                <view class="fb_tips">
                    <text>功能建议</text>
                    <text>购买遇到的问题</text>
                    <text>性能问题</text>
                    <text>其他</text>
                </view>
                <view class="fb_content">
                    <textarea :value="textValue" @input="handleTextInput" placeholder="请描述下您的问题"></textarea>
                    <view class="fb_tool">
                        <button @click="handleChooseImg">+</button>
                        <!-- 当绑定的数组是常规的普通数组时候 key绑定的是*this -->
                        <view class="up_img_item" @click="handleDeleteImg" :data-index="index" v-for="(item, index) in imgChooseList" :key="index">
                            <UpImg :src="item"></UpImg>
                        </view>
                    </view>
                </view>
                <view class="form_btn_wrap">
                    <button type="warn" size="mini" @click="handleFormSubmit">
                        <icon class="" type="success_no_circle" size="mini" color="#fff"></icon>
                        提交
                    </button>
                </view>
            </view>
        </Tabs>
    </view>
</template>

<script>
import Tabs from '../../components/Tabs/Tabs';
import UpImg from '../../components/UpImg/UpImg';
// pages/feedback/index.js
export default {
    components: {
        Tabs,
        UpImg
    },
    data() {
        return {
            tabs: [
                {
                    id: 0,
                    value: '体验问题',
                    isActive: true
                },
                {
                    id: 1,
                    value: '商品/商家投诉',
                    isActive: false
                }
            ],
            // 被选中的图片路径的数组
            imgChooseList: [],
            textValue: {} // 文本域内容
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 外网的图片的路径数组
        uploadImgs: [],

        /**
         * 标题的点击事件 从子组件Tabs传递过来的
         */
        handleTabsItemChange(e) {
            console.log(e);
            const index = e.detail;
            let tabs = JSON.parse(JSON.stringify(this.tabs));
            tabs.forEach((item, index_tabs) => {
                if (index_tabs === index) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            }); // 重新赋值

            this.setData({
                tabs
            });
        },

        // 点击“+”  选择图片
        handleChooseImg() {
            // 1.调用小程序内置的选择图片api
            uni.chooseImage({
                count: 9,
                // 同时选中的图片的数量
                sizeType: ['original', 'compressed'],
                // 图片的格式  相册   照相机
                sourceType: ['album', 'camera'],
                // 图片的来源  相册  照相机
                success: (result) => {
                    console.log(result);
                    this.setData({
                        imgChooseList: [...this.imgChooseList, ...result.tempFilePaths]
                    });
                    console.log(this.imgChooseList);
                },
                fail: () => {},
                complete: () => {}
            });
        },

        // 点击自定义图片组件
        handleDeleteImg(e) {
            const { index } = e.currentTarget.dataset;
            console.log(index);
            let { imgChooseList } = this;
            this.imgChooseList.splice(index, 1);
            this.setData({
                imgChooseList
            });
        },

        // 文本域的输入事件
        handleTextInput(e) {
            console.log(e);
            this.setData({
                textValue: e.detail.value
            });
        },

        // 提交
        handleFormSubmit() {
            const { textValue, imgChooseList } = this;

            if (!textValue.trim()) {
                uni.showToast({
                    title: '输入不合法！',
                    icon: 'none'
                });
                return;
            }

            console.log(imgChooseList); // 准备上传图片到专门的图片服务器
            // 上传文件的api 不支持多个文件的同时上传  所以采取遍历数组  挨个上传
            // 显示正在等待的图片

            uni.showLoading({
                title: '正在上传中',
                mask: true
            }); // 判断有没有需要上传的图片数组

            if (imgChooseList.length !== 0) {
                imgChooseList.forEach((item, index) => {
                    uni.uploadFile({
                        url: 'https://img.coolcr.cn/index/api.html',
                        // 图片要上传到哪里
                        filePath: item,
                        // 被上传的文件的路径
                        name: 'image',
                        // 上传的文件的名称   后台来获取文件 file
                        formData: {},
                        // 顺带的文本信息
                        success: (result) => {
                            console.log(result);
                            let url = JSON.parse(result.data).url;
                            this.uploadImgs.push(url); // 所有的图片都上传完了才触发

                            if (index === imgChooseList.length - 1) {
                                uni.hideLoading(); // 关闭上传中...弹窗

                                console.log('把文本的内容和外网的图片数组提交到后台中---此处仅做前端模拟演示...'); // 提交成功了
                                // 重置页面

                                this.setData({
                                    textValue: '',
                                    imgChooseList: []
                                }); // 返回上一个页面

                                uni.navigateBack({
                                    delta: 1
                                });
                            }
                        },
                        fail: () => {},
                        complete: () => {}
                    });
                });
            } else {
                console.log('只提交了文本！');
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
